import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { DiscoverWrapper, NavWrap } from './style'
import { Link, NavLink } from 'react-router-dom'
import { dicoverMenu } from '@/common/local-data'

interface IProps {
  children?: ReactNode
}

const Nav: FC<IProps> = () => {
  return (
    <DiscoverWrapper>
      <div className="top">
        <NavWrap className="wrap-v1">
          {dicoverMenu.map((item) => {
            return (
              <div className="item" key={item.title}>
                <NavLink to={item.link}>{item.title}</NavLink>
              </div>
            )
          })}
        </NavWrap>
      </div>
    </DiscoverWrapper>
  )
}

export default memo(Nav)
